<template>
  <div>
    <!-- 关闭按钮 -->
    <van-nav-bar
  title="登录"
  right-text="注册"
  @click-right="register"
/>
    <!-- logo -->
    <div class="logo">
      <img src="../assets/logo.jpg" alt />
    </div>
    <!-- 表单 -->
    <van-form>
      <van-field
        v-model="userForm.username"
        name="用户名"
        label="用户名"
        placeholder="用户名/手机号"
        :rules="[{ required: true, message: '请填写用户名/手机号' }]"
      />
      <van-field
        v-model="userForm.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="login">登陆</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    //返回首页
    getindex(){
      this.$router.push('/index')
    },
    register(){
      this.$router.push('/register')
    },
    async login() {
     const {data:res} = await this.$http.post('login',this.userForm)
     //登陆失败
     
     if(this.userForm.username === '' ||this.userForm.password==='' ){
       return this.$toast.fail('请输入完整信息')
     }
  //登陆成功
    // 保存token
      localStorage.setItem('token','Bearer '+res.data.token)
      //保存用户的id
      localStorage.setItem('userId',res.data.user.id)
      this.$router.push('/index')
      
    }
  }
}
</script>

<style lang="less" scoped>

.logo {
  width: 35vw;
  margin: 20px auto;
  border-radius: 50%;
  height: 35vw;
  text-align: center;
  margin-bottom: 9.722vw;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.register{
  position: absolute;
  right:5.556vw;
  color:red;
}

</style>